<template>
  <div class="article-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航 -->
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb> -->
        <my-breadcrumb>内容管理</my-breadcrumb>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="状态">
        <!-- label是被选中的值 -->
          <el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="频道">
          <el-select v-model="form.channelId" clearable placeholder="请选择频道">
            <el-option
            v-for="channel in channels"
            :key="channel.id"
            :label="channel.name"
            :value="channel.id"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- 使用封装的频道组件 v-model="form.channelId"绑定数据项-->
        <my-channels v-model="form.channelId"></my-channels>
        <el-form-item label="日期">
            <!-- 日期选择器组件el-date-picker   value-format时间格式-->
            <el-date-picker
                type="daterange"
                placeholder="选择日期"
                v-model="form.date"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
            ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery" :loading="loading">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top:20px;">
      <div slot="header" class="clearfix">根据查询显示{{total_count}}条结果，当前是第{{cur_page}}页</div>
      <!-- 表格的列是结构；label是标题，prop是数据的来源。表格的行是数据； -->
      <el-table :data="articles" style="width: 100%" v-loading="loading">
        <el-table-column  label="封面" width="230">
          <template slot-scope="scope">
            <!-- scope.row用于获取当前行的数据 -->
            <!-- 图片 lazy懒加载-->
            <!-- <div>{{scope.row.cover.images[0]}}</div> -->
            <el-image :src="scope.row.cover.images[0]" lazy style="width:150px;height:100px;">
            <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
            </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="300"></el-table-column>
        <!-- 自定义列 -->
        <el-table-column label="状态" width="200">
          <!-- scope.row.status后端传回来的数据是数值，前端要显示对应的字符串 -->
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===0">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="info">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间" width="230"></el-table-column>
        <!-- 自定义列：两个按钮 scope.$index当前行的行索引；scope.row当前行的数据-->
        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
            size="mini"
            type="primary"
            @click="hEdit(scope.$index, scope.row)" icon="el-icon-edit" circle></el-button>
            <el-button
            size="mini"
            type="danger"
            @click="hDelete(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
        </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 current-change点击页码的时候会触发,并且会传入当前页码-->
      <el-pagination
        :disabled="loading"
        background
        layout="prev, pager, next"
        :page-size="per_page"
        :total="total_count"
        style="margin-top:15px;"
        @current-change="hPageChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import MyBreadcrumb from '../../components/MyBreadcrumb.vue';
import { getArticles, deleteArticle } from '../../api/article';
import MyChannels from '@/components/MyChannelsVmodel.vue';
export default {
  name: 'Articles',
  props: {},
  data () {
    return {
      loading: false, // 是否在查询加载状态
      form: {
        date: null, // 查询日期
        status: null, // 查询状态
        channelId: null // 选中的频道
      },
      articles: [], // 文章列表
      total_count: 0, // 总条数
      per_page: 0, // 每页显示的条数
      cur_page: 1 // 当前页数
      // channels: [] // 获取频道
    };
  },
  components: {
    MyBreadcrumb,
    MyChannels
  },
  computed: {},
  created () {
    this.loadArticles();
    // this.loadChannels();
  },
  mounted () {},
  methods: {
    // loadChannels () {
    //   getArticleChannels().then(res => {
    //     console.log('获取频道', res.data.data.channels);
    //     this.channels = res.data.data.channels;
    //   }).catch(err => {
    //     console.log(err);
    //   });
    // },
    // async loadChannels () {
    //   try {
    //     const res = await getArticleChannels();
    //     console.log('获取频道', res.data.data.channels);
    //     this.channels = res.data.data.channels;
    //   } catch (error) {
    //     console.log(error);
    //   }
    // },
    // loadArticles () {
    //   this.loading = true; // 开启查询加载状态
    //   // 如果用户选择了日期范围，则传入即可；如果用户没有选择日期范围，则要把参数设置为null
    //   // axios会把参数值为null的数据过滤掉，即不传递这个参数给后端
    //   // c = a & b;如果a为null则c为null,如果a不是null，则c为b
    //   getArticles({
    //     // a = str || null;如果str是空字符串，则a是null.
    //     // 参数为null时，不传该参数
    //     channel_id: this.form.channelId || null,
    //     status: this.form.status,
    //     begin_pubdate: this.form.date && this.form.date[0],
    //     end_pubdate: this.form.date && this.form.date[1],
    //     page: this.cur_page
    //   }).then(res => {
    //     this.loading = false; // 关闭查询加载状态
    //     console.log('获取文章', res);
    //     this.articles = res.data.data.results;
    //     this.total_count = res.data.data.total_count;
    //     this.per_page = res.data.data.per_page;
    //   }).catch(err => {
    //     this.loading = false; // 关闭查询加载状态
    //     console.log(err);
    //     this.$message.error('查询失败，参数无效');
    //   });
    // },
    async loadArticles () {
      this.loading = true; // 开启查询加载状态
      // 如果用户选择了日期范围，则传入即可；如果用户没有选择日期范围，则要把参数设置为null
      // axios会把参数值为null的数据过滤掉，即不传递这个参数给后端
      // c = a & b;如果a为null则c为null,如果a不是null，则c为b
      try {
        const res = await getArticles({
          // a = str || null;如果str是空字符串，则a是null.
          // 参数为null时，不传该参数
          channel_id: this.form.channelId || null,
          status: this.form.status,
          begin_pubdate: this.form.date && this.form.date[0],
          end_pubdate: this.form.date && this.form.date[1],
          page: this.cur_page
        });
        this.loading = false; // 关闭查询加载状态
        console.log('获取文章', res);
        this.articles = res.data.data.results;
        this.total_count = res.data.data.total_count;
        this.per_page = res.data.data.per_page;
      } catch (err) {
        this.loading = false; // 关闭查询加载状态
        console.log(err);
        this.$message.error('查询失败，参数无效');
      }
    },
    onQuery () {
      console.log('查询参数', this.form);
      // 用户点击查询，重置页码
      this.cur_page = 1;
      this.loadArticles();
    },
    hEdit (index, row) {
      console.log(index, row);
      const id = row.id.toString();
      // 编程式导航，页面跳转到编辑文章页面
      this.$router.push('/editarticle/' + id);
    },
    // hDelete (index, row) {
    //   console.log('要删除的当前行数据', index, row);
    //   const id = row.id.toString();
    //   console.log('要删除的当前行数据id', id);

    //   this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     // 根据id删除文章,调用接口传入id
    //     deleteArticle(id).then(res => {
    //       console.log(res);
    //       this.$message.success('删除成功！');
    //     }).catch(err => {
    //       console.log(err);
    //       this.$message.error('删除失败！');
    //     });
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //   });
    // },
    hDelete (index, row) {
      console.log('要删除的当前行数据', index, row);
      const id = row.id.toString();
      console.log('要删除的当前行数据id', id);

      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 根据id删除文章,调用接口传入id
          const res = await deleteArticle(id);
          console.log(res);
          this.$message.success('删除成功！');
        } catch (err) {
          console.log(err);
          this.$message.error('删除失败！');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    hPageChange (curPage) {
      // 当前页码
      console.log('当前页码', curPage);
      // 更新当前页码，再发请求更新视图
      this.cur_page = curPage;
      this.loadArticles();
    }
  }
};
</script>

<style scoped lang='less'></style>
